<template>
  <div class="question-container">
      <div class="question-wrapper">
          <div class="title">
              <img src="../assets/题目.png" alt="" class="title-icon">
              <span class="title-text">题目</span>
          </div>
          <div class="content">{{ text }}</div>
      </div>
      <div class="complete-wrapper">
          <div class="title">
              <img src="../assets/统计.png" alt="" class="title-icon">
              <span class="title-text">统计</span>
          </div>
          <div class="complete-info">
              <p class="complier-info">编译通过人数{{ getCompileCount() }}/{{ students.length }}</p>
              <p class="sub-info">提交人数{{ getSubmitCount() }}/{{ students.length }}</p>
              <div class="sort-info">
                <el-select v-model="sortvalue" placeholder="选择排序方式" @change="changeSort">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
          </div>
          <!-- <table class="list-info">
              <tr class="list-title">
                  <th>姓名</th>
                  <th>学号</th>
                  <th>班级</th>
                  <th>提交时间</th>
                  <th>编译通过</th>
                  <th>作业详情</th>
              </tr>
              <tr v-for="(item, index) in students" :key="index" class="record">
                  <td>{{ item.real_name }}</td>
                  <td>{{ item.student_number }}</td>
                  <td>{{ item.class_name}}</td>
                  <td>{{ item.submit_time }}</td>
                  <td><span :class="[item.compile_successed?'pass':'wrong']"></span></td>
                  <td>
                    <router-link v-if="item.submited" :to="{ name: 'homework', params: { questionId: questionId, text: text, questionType: questionType, projectId: item.project_id } }">作业详情</router-link>
                  </td>
              </tr>
          </table> -->
          <el-table :data="students" style="width: 100%">
            <el-table-column prop="real_name" label="姓名" align="center"></el-table-column>
            <el-table-column prop="student_number" label="学号" align="center"></el-table-column>
            <el-table-column prop="class_name" label="班级" align="center"></el-table-column>
            <el-table-column prop="submit_time" label="提交时间" align="center"></el-table-column>
            <el-table-column label="编译通过" align="center">
              <template slot-scope="scope">
                <span :class="[scope.row.compile_successed?'pass':'wrong']"></span>
              </template>
            </el-table-column>
            <el-table-column label="作业详情" align="center">
              <template slot-scope="scope">
                  <router-link v-if="scope.row.submited" :to="{ name: 'homework', params: { questionId: questionId, text: text, questionType: questionType, projectId: scope.row.project_id, courseId: -1}}">作业详情</router-link>
                  <span v-else> 暂无 </span>  
              </template>
            </el-table-column>
          </el-table>
      </div>
  </div>
</template>
<script>
import { getQuestionInfo } from '@/utils/api'
export default {
  name: 'QuestionInfo',
  props: {
    questionId: [String, Number],
    text: String,
    questionType: String,
    courseId: [String, Number]
  },
  data () {
    return {
      students: [],
      evenstudents: [],
      options: [
        {
          value: '1',
          label: '按班级排序'
        },
        {
          value: '2',
          label: '按学号排序',
        },
      ],
      sortvalue: '1'
    }
  },
  mounted () {
    if (!this.course) {
      this.getQuestionInfo()
    }
    // console.log(this.courseId)
  },
  methods: {
    async getQuestionInfo () {
      let res = await getQuestionInfo({ ti_id: this.questionId })
      if (res.error === '10') {
        this.students = res.result
        console.log(this.students)
        this.evenstudents=this.students.sort(function (object1,object2) {
          if (object1.class_name == null)
          {
            return 1
          }
          else if(object2.class_name == null)
          {
            return -1
          }
          else if (object1.class_name > object2.class_name)
          {
            return 1
          }
          else if (object1.class_name < object2.class_name)
          {
            return -1
          }
          else
          {
            return 0
          }
        })
      } else {
        this.$notify({
          title: '获取课程出错',
          message: res.result,
          type: 'error'
        })
      }
    },
    getSubmitCount () {
      let count = 0
      this.students.map((item) => {
        if (item.submited) {
          ++count
        }
      })
      return count
    },
    getCompileCount () {
      let count = 0
      this.students.map((item) => {
        if (item.compile_successed) {
          ++count
        }
      })
      return count
    },
    changeSort () {
      if (this.sortvalue == '1')
      {
        this.evenstudents=this.students.sort(function (object1,object2) {
          if (object1.class_name > object2.class_name)
          {
            return 1
          }
          else if (object1.class_name < object2.class_name)
          {
            return -1
          }
          else
          {
            return 0
          }
        })
      }
      else if(this.sortvalue == '2')
      {
        this.evenstudents=this.students.sort(function (object1,object2) {
          if (parseInt(object1.student_number) > parseInt(object2.student_number))
          {
            return 1
          }
          else if (parseInt(object1.student_number) < parseInt(object2.student_number))
          {
            return -1
          }
          else
          {
            return 0
          }
        })
      }
      else
      {
        this.evenstudents=this.students
      }
    }
  }
}
</script>
<style lang="less">
.question-container {
  width: 80%;
  margin: 30px auto 60px auto;
  @media screen and (max-width: 768px){
    width: 100%;
    margin: 0;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .title {
      display: flex;
      align-items: center;
      margin-top: 20px;
      margin-bottom: 30px;
  }
  .title-icon {
    width: 30px;
  }
  .title-text {
      margin-left: 8px;
  }
  .question-wrapper .content {
      width: 80%;
      padding: 15px 45px;
      text-align: center;
      border: 1px solid #bbb;
      margin-left: 15px;
      margin-bottom: 20px;
      @media screen and (max-width: 768px){
        padding: 15px 30px;
      }
  }
  .line {
    width: 80vw;
    height: 0;
    border-bottom: 1px solid #bbb;
    margin-left: -10vw;
    @media screen and (max-width: 768px) {
      margin-left: 0;
    }
  }
  .complete-info {
      display: flex;
      height: 36px;
      margin-left: 15px;
  }
  .complete-info .complier-info {
      margin-right: 90px;
      @media screen and (max-width: 768px){
        margin-right: 20px;
      }
  }
  .complete-info.sub-info{
      margin-right: 90px;
       @media screen and (max-width: 768px){
        margin-right: 20px;
      }
  }
  .complete-info .sort-info{
      margin-left: 90px;
      margin-top: -10px;
       @media screen and (max-width: 768px){
        margin-left: 20px;
        margin-top: 0;
      }
  }
  .list-info {
      margin-top: 30px;
      width: 100%;
      box-sizing: border-box;
  }
  .list-info tr {
      padding-left: 15px;
      height: 30px;
      display: flex;
      align-items: center;
      color: #444;
      justify-content: space-between;
      border-bottom: 1px solid #bbb;
  }
  .list-info tr.list-title {
      border-bottom: 1px solid #35a9e3;
  }
  .list-info .list-title + tr {
      margin-top: 15px;
  }
  .list-info td, .list-info th {
      flex: 1;
      text-align: left;
  }
  .list-info tr>*:nth-child(n+2) {
      text-align: center;
  }
  .list-info td span {
      display: inline-block;
      height: 12px;
      width: 120px;
  }
  td span.wrong {
      background: #f00;
      display: block;
      height: 20px;
  }
  td span.pass {
      background: #35a9e3;
      display: block;
      height: 20px;
  }
  td a {
      text-decoration: none;
      color: #000;
  }
}
</style>
